<template>
  <div class="container1">

    <el-empty v-if=" Form.category==-1" description="大赛还未开始">
      <el-button type="primary" @click="back">返回</el-button>
    </el-empty>

  <div v-if=" Form.category!=-1">
      <div class="top">
      <div class="name">挑战杯-{{ Form.category ==1?'大':'小'}}挑</div>
      <div class="icon">
        <div class="loader">
          <span class="ball" style="--i:1"></span>
          <span class="shadow" style="--i:1"></span>
          <span class="ball" style="--i:2"></span>
          <span class="shadow" style="--i:2"></span>
          <span class="ball" style="--i:3"></span>
          <span class="shadow" style="--i:3"></span>
          <span class="ball" style="--i:4"></span>
          <span class="shadow" style="--i:4"></span>
          <span class="ball" style="--i:5"></span>
          <span class="shadow" style="--i:5"></span>
        </div>
      </div>
    </div>
    <div class="form">
      <div class="title">
        <h3>填写信息</h3>
      </div>

      <el-form
          ref="FormRef"
          :model="Form"
          :rules="rules"
          label-width="30%"
          class="demo-ruleForm"
          style="width: 100%;"
          status-icon
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="Form.name"/>
        </el-form-item>
        <el-form-item label="申报类别" prop="type1">
          <el-select v-model="Form.type1" placeholder="科技发明制作A类">
            <el-option label="哲学社会科学类社会调查报告和学术论文" value="哲学社会科学类社会调查报告和学术论文"/>
            <el-option label="科技发明制作A类" value="科技发明制作A类"/>
            <el-option label="科技发明制作B类" value="科技发明制作B类"/>
            <el-option label="自然科学类学术论文" value="自然科学类学术论文"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属领域" prop="field">
          <el-select v-model="Form.field" placeholder="信息技术类">
            <el-option label="信息技术类" value="信息技术类"/>
            <el-option label="机械控制类" value="机械控制类"/>
            <el-option label="生、化、环、材类" value="生、化、环、材类"/>
            <el-option label="文化科技创意类" value="文化科技创意类"/>
            <el-option label="人文社科类及调研报告" value="人文社科类及调研报告"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申报种类" prop="kind">
          <el-select v-model="Form.kind" placeholder="集体项目">
            <el-option label="集体项目" value="集体项目"/>
            <el-option label="个人项目" value="个人项目"/>
          </el-select>
        </el-form-item>
        <el-form-item label="第一指导教师" prop="teacher1">
          <el-input v-model="Form.teacher1"/>
        </el-form-item>
        <el-form-item label="第二指导教师" prop="teacher2">
          <el-input v-model="Form.teacher2"/>
        </el-form-item>
        <el-form-item label="第三指导教师" prop="teacher3">
          <el-input v-model="Form.teacher3"/>
        </el-form-item>
        <el-form-item label="是否有实物展示" prop="display">
          <el-select v-model="Form.display" placeholder=" ">
            <el-option label="是" value="是"/>
            <el-option label="否" value="否"/>
          </el-select>
        </el-form-item>
        <el-form-item label="特殊需求" prop="requirements">
          <el-input v-model="Form.requirements"/>
        </el-form-item>
        <el-form-item label="第一作者联系方式" prop="telephone">
          <el-input v-model="Form.telephone"/>
        </el-form-item>
        <el-form-item label="第一作者姓名" prop="name1">
          <el-input v-model="Form.name1"/>
        </el-form-item>
        <el-form-item label="第一作者学院" prop="college1">
          <el-input v-model="Form.college1"/>
        </el-form-item>
        <el-form-item label="第一作者学号" prop="studentid1">
          <el-input v-model="Form.studentid1"/>
        </el-form-item>
        <el-form-item label="第二作者姓名" prop="name2">
          <el-input v-model="Form.name2"/>
        </el-form-item>
        <el-form-item label="第二作者学院" prop="college2">
          <el-input v-model="Form.college2"/>
        </el-form-item>
        <el-form-item label="第二作者学号" prop="studentid2">
          <el-input v-model="Form.studentid2"/>
        </el-form-item>
        <el-form-item label="第三作者姓名" prop="name3">
          <el-input v-model="Form.name3"/>
        </el-form-item>
        <el-form-item label="第三作者学院" prop="college3">
          <el-input v-model="Form.college3"/>
        </el-form-item>
        <el-form-item label="第三作者学号" prop="studentid3">
          <el-input v-model="Form.studentid3"/>
        </el-form-item>
        <el-form-item label="第四作者学院" prop="name4">
          <el-input v-model="Form.name4"/>
        </el-form-item>
        <el-form-item label="第四作者学院" prop="college4">
          <el-input v-model="Form.college4"/>
        </el-form-item>
        <el-form-item label="第四作者学号" prop="studentid4">
          <el-input v-model="Form.studentid4"/>
        </el-form-item>
        <el-form-item label="第五作者姓名" prop="name5">
          <el-input v-model="Form.name5"/>
        </el-form-item>
        <el-form-item label="第五作者学院" prop="college5">
          <el-input v-model="Form.college5"/>
        </el-form-item>
        <el-form-item label="第五作者学号" prop="studentid5">
          <el-input v-model="Form.studentid5"/>
        </el-form-item>
        <el-form-item label="第六作者姓名" prop="name6">
          <el-input v-model="Form.name6"/>
        </el-form-item>
        <el-form-item label="第六作者学院" prop="college6">
          <el-input v-model="Form.college6"/>
        </el-form-item>
        <el-form-item label="第六作者学号" prop="studentid6">
          <el-input v-model="Form.studentid6"/>
        </el-form-item>
        <el-form-item label="第七作者姓名" prop="name7">
          <el-input v-model="Form.name7"/>
        </el-form-item>
        <el-form-item label="第七作者学院" prop="college7">
          <el-input v-model="Form.college7"/>
        </el-form-item>
        <el-form-item label="第七作者学号" prop="studentid7">
          <el-input v-model="Form.studentid7"/>
        </el-form-item>
        <el-form-item label="第八作者姓名" prop="name8">
          <el-input v-model="Form.name8"/>
        </el-form-item>
        <el-form-item label="第八作者学院" prop="college8">
          <el-input v-model="Form.college8"/>
        </el-form-item>
        <el-form-item label="第八作者学号" prop="studentid">
          <el-input v-model="Form.studentid"/>
        </el-form-item>
        <el-form-item label="pptx(请转成pdf)" prop="ppt">
          <div class="file">
            <img src="https://img2.baidu.com/it/u=3474391708,714040776&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
                 alt="">
            <div>
              <upload @getName="getName1" :type="'ppt'"></upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="pdf(计划书)" prop="pdf">

          <div class="file">
            <img
                src="https://is4-ssl.mzstatic.com/image/thumb/Purple125/v4/b2/b6/46/b2b6462d-a477-3927-72ac-80250d244c70/source/512x512bb.jpg"
                alt="">
            <div>
              <upload @getName="getName2" :type="'pdf'"></upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="mp4" prop="mp4">

          <div class="file">
            <img src="https://img2.baidu.com/it/u=3458738258,1426404541&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                 alt="">
            <div>
              <upload @getName="getName3" :type="'mp4'"></upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item style="transform: translateY(30px)">
          <el-button type="primary" @click="submitForm(FormRef)">
            提交
          </el-button>
          <el-button @click="resetForm(FormRef)"> 清除</el-button>
        </el-form-item>

      </el-form>
      <div style="margin:40px auto;color: #A8ABB2">选择文件后，记得点击上传</div>

    </div>
  </div>

  </div>
</template>

<script setup>
import {useRouter,useRoute} from "vue-router"
import {reactive, ref, inject,onMounted} from 'vue'
import upload from '@/components/upload'
const baseUrl = inject("$baseURL")
const axios = inject("$axios")
const FormRef = ref()
const Form = reactive({
  "number": "",
  "name": "",
  "type1": "",
  "field": "",
  "kind": "",
  "teacher1": "",
  "teacher2": "",
  "teacher3": "",
  "display": "",
  "requirements": "",
  "telephone": "",
  "name1": "",
  "college1": "",
  "studentid1": "",
  "name2": "",
  "college2": "",
  "studentid2": "",
  "name3": "",
  "college3": "",
  "studentid3": "",
  "name4": "",
  "college4": "",
  "studentid4": "",
  "name5": "",
  "college5": "",
  "studentid5": "",
  "name6": "",
  "college6": "",
  "studentid6": "",
  "name7": "",
  "college7": "",
  "studentid7": "",
  "name8": "",
  "college8": "",
  "studentid": "",
  "ppt": "",
  "pdf": "",
  "mp4": "",
  "judge": "",
  "remark": "",
  "score": "",
  category:0
})
const route = useRoute()
const rules = reactive({
  name: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  type1: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  kind: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  display: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
    field: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  requirements: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  telephone: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  teacher1: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  studentid1: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  name1: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  college1: [
    {required: true, message: '请输入信息', trigger: 'blur'},

  ],
  ppt: [
    {required: true, message: '选择了文件但未上传', trigger: 'blur'},

  ],
  pdf: [
    {required: true, message: '选择了文件但未上传', trigger: 'blur'},

  ],
})
const getName1 = (value) => {
  Form.ppt = baseUrl+'ppt/'+value.value
}
const getName2 = (value) => {
  Form.pdf = baseUrl+'pdf/'+value.value
}
const getName3 = (value) => {
  Form.mp4 = baseUrl+'mp4/'+value.value
}
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      axios.post("sub", Form).then(res => {
        console.log(res)
        ElMessage({
          showClose: true,
          message: '上传成功',
          type: 'success',
        })
        setTimeout(()=>{
          router.back()
        },1000)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
onMounted(()=>{
  axios.get('competition/check').then(res=>{
    if(res.code==1){
       Form.competitionid = res.data.id
    }else  Form.category = -1
  })


})
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

const router = useRouter()
const back = () => {
  router.back()
}
</script>

<style scoped lang="less">
.container1 {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-color: #ffffff;
}

.top {
  background-color: #ef6f48;
  width: 100%;
  height: 60px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  z-index: 20;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 60px;
  padding: 0 20px;
  border: transparent 1px solid;
}

.title {
  line-height: 30px;
  height: 30px;
  border-left: #409EFF 5px solid;
  text-indent: 1em;
  color: #303133;
}

.form {
  width: 80%;
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  transform: translateY(70px);
  background-color: #ffffff;
  padding-right: 300px;
  box-sizing: border-box;

  .file {
    margin-left: 30px;
    margin-bottom: 10px;
    margin-top: 30px;

    img {
      width: 100px;
      height: 100px;
    }

    div {
      width: 500px;
      height: 30px;
    }
  }

}
@media screen and (max-width: 480px) {
.container1 {
  width: 10rem;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 100px;
  .top{
    width: 10rem;
  }
  .form{
    width: 16rem;
    font-size: 12px;
  }
  .el-form{
    width: 10rem;
  }

}

}


@media screen and (max-width: 390px) {
.container1 {
  width: 10rem;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 100px;
  .top{
    width: 10rem;
  }
  .form{
    width: 17.6rem;
    font-size: 12px;
  }

}

}

</style>